import { Spin, message } from 'antd';
import React, { useEffect } from 'react';

interface Props {
  // 是否是umirc中引用的异步路由显示的loading，是的话30秒后还存在说明发布新版本代码了已经无法访问到该chunk，则进行页面刷新。默认为true。
  isDynamicImportLoading?: boolean;
}

export default function RouteLoading(props: Props) {
  const { isDynamicImportLoading = true } = props;

  useEffect(() => {
    let timer: number;
    if (isDynamicImportLoading) {
      timer = window.setTimeout(() => {
        message.loading('正在发布新版本，即将刷新页面', 0);
        setTimeout(() => {
          window.location.reload();
        }, 2000);
      }, 30000);
    }
    return () => {
      if (timer) {
        window.clearTimeout(timer);
      }
    };
  }, []);

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Spin size="large" />
    </div>
  );
}
